import React, { PureComponent } from "react";

export class App extends PureComponent {
  constructor() {
    super()

    this.state = {
      userName: 'niko',
      password: ''
    }
  }

  handleInputChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleClick(e) {
    e.preventDefault()
    console.log(this.state.userName,this.state.password);
    return
  }

  render() {

    const { userName, password } = this.state
    return (
      <div>
        <form onSubmit={(e) => this.handleClick(e)}>
          <div>            
            用户名:
            <input 
              type="text"
              name="userName"
              value={userName}
              onChange={(e) => this.handleInputChange(e)}
            />
          </div>
          <div>
            密码:
            <input 
              type="password"
              name="password"
              value={password}
              onChange={(e) => this.handleInputChange(e)}
            />
          </div>
          <button type="submit">注册</button>
        </form>
      </div>
    )
  }
}

export default App;
